<template>
  <div class="content">
    <div class="siquanDiv">
      <TitleVue :name="'水库特性'" />
      <!-- <div class="modelOne">
        <div class="itemDiv">
          <img src="@/assets/img/common/工程规模.png" alt="" />
          <div class="rightDiv">
            <p>工程规模</p>
            <p>{{ ydbModel }}</p>
          </div>
        </div>
        <div class="itemDiv">
          <img src="@/assets/img/common/主坝坝型.png" alt="" />
          <div class="rightDiv">
            <p>主坝坝型</p>
            <p>{{ ydbType }}</p>
          </div>
        </div>
        <div class="itemDiv">
          <img src="@/assets/img/common/主坝坝高.png" alt="" />
          <div class="rightDiv">
            <p>主坝坝高</p>
            <p>{{ ydbHeight }}m</p>
          </div>
        </div>
      </div> -->
      <div class="modelTwo">
        <div class="itemDiv" v-for="(item, index) in modelList" :key="index">
          <p>{{ item.name }}</p>
          <p :title="item.val">{{ item.val }}</p>
        </div>
      </div>
    </div>
    <!-- 
    <div class="sizhiDiv">
      <TitleVue :name="'四制体系'" />
      <div class="sizhiContent">
        <div class="itemDiv" v-for="(item, index) in sizhiList" :key="index">
          <div class="leftDiv" @mouseover="activeIndex = index" @mouseout="activeIndex = null">
            <img :src="getImg(index)" alt="" />
            <div class="firstDiv">
              <p>{{ item.role }}</p>
              <p>{{ item.name }}</p>
            </div>
          </div>

          <div class="rightDiv">
            <p>联系方式</p>
            <p>{{ item.phone }}</p>
          </div>
        </div>
      </div>
    </div> -->
    <div class="sizhiDiv">
      <TitleVue :name="'库水位'" />
      <div class="sizhiContent">
        <div style="height: 100%" ref="damChart"></div>
      </div>
    </div>
    <div class="jypxDiv">
      <TitleVue :name="'实时视频'" />
      <div class="jypxContent">
        <video class="realtime_video" src="@/assets/video/video.mp4" autoplay loop />
      </div>
    </div>
  </div>
</template>

<script>
import TitleVue from '../common/titleVue.vue'
import * as echarts from 'echarts'
import VideoPlayer from '@/components/videoPlayer'

export default {
  name: 'ZlLeft',
  components: {
    TitleVue,
    VideoPlayer
  },
  data() {
    return {
      activeIndex: null,
      ydbModel: '中型',
      ydbType: '均质土坝',
      ydbHeight: 22.2,
      modelList: [
        {
          name: '水库名称',
          val: '蔡庄水库'
        },
        {
          name: '所在河流',
          val: '白马河'
        },
        {
          name: '流域面积',
          val: '223km²'
        },
        {
          name: '总库容',
          val: '2070万m³'
        },
        {
          name: '工程规模',
          val: '中型'
        },
        {
          name: '大坝类型',
          val: '均质土坝'
        },
        {
          name: '坝高',
          val: '22.2m'
        },
        {
          name: '死水位',
          val: '1104.26m'
        },
        {
          name: '汛限水位',
          val: '1106.46m'
        },

        {
          name: '设计洪水位',
          val: '1108.08m'
        },
        {
          name: '校核洪水位',
          val: '1109.09m'
        },
        {
          name: '工程组成',
          val: '大坝、溢洪道、输水洞'
        }

        // {
        //   name: '实时库容',
        //   val: '1106.96万m³'
        // },
        // {
        //   name: '实时水位',
        //   val: '1107.03m'
        // },
        // {
        //   name: '降雨量',
        //   val: '10mm'
        // },
        // {
        //   name: '总库容',
        //   val: '2070万m³'
        // },

        // {
        //   name: '坝顶高程',
        //   val: '1110.76m'
        // },

        // {
        //   name: '正常蓄水位',
        //   val: '1106.46m'
        // },
      ],
      sizhiList: [
        {
          role: '政府责任人',
          name: '李志刚',
          phone: '13111111111'
        },
        {
          role: '主管部门责任人',
          name: '岳俊文',
          phone: '13111111111'
        },
        {
          role: '管理单位责任人',
          name: '周金锁',
          phone: '13111111111'
        },
        {
          role: '技术责任人',
          name: '郭海卿',
          phone: '13111111111'
        },
        {
          role: '巡查责任人',
          name: '王瑞峰',
          phone: '13111111111'
        }
      ],
      jypxList: [
        {
          name: '年度计划',
          val: 24
        },
        {
          name: '已开始',
          val: 8
        },
        {
          name: '未开始',
          val: 16
        }
      ],
      damChart: null
    }
  },
  mounted() {
    this.initDamChart({
      // 坝顶高程
      bdgc: 1110.76,
      //坝高
      bg: 22.2,
      // 校核水位
      jhsw: 1109.09,
      // 设计水位
      sjsw: 1108.08,
      // 汛限水位
      xxsw: 1106.46,
      // 实测水位
      scsw: 1107.46,
      // 死水位
      ssw: 1104.26
    })
  },
  methods: {
    getImg(index) {
      var img = this.activeIndex == index ? 'headerPictue2' : 'headerPictue'
      return require('@/assets/img/common/' + img + '.png')
    },
    initDamChart(datas) {
      if (this.damChart) {
        this.damChart.dispose()
      }
      const chartDom = this.$refs.damChart
      this.damChart = echarts.init(chartDom)
      const yAxisStart = datas.bdgc - datas.bg
      // const heightGap = datas.bdgc - datas.ssw
      const option = {
        grid: {
          left: '2%',
          right: '3%',
          top: '10%',
          bottom: '5%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: false,
          axisLine: {
            show: false
          },
          axisLabel: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          triggerEvent: true
        },
        yAxis: {
          type: 'value',
          min: yAxisStart,
          max: datas.bdgc,
          interval: 6,
          axisLabel: {
            show: false
          },
          axisLine: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        series: [
          {
            type: 'line',
            name: '坝高',
            z: 9,
            lineStyle: {
              width: 4,
              color: '#FFFFFF',
              shadowColor: '#229AFF',
              shadowBlur: 10
            },
            areaStyle: {
              color: 'RGBA(16, 30, 56, 1)',
              shadowBlur: 10,
              shadowColor: '#229AFF',
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              opacity: 1
            },
            symbolSize: 0,
            label: {
              show: true,
              position: 'top',
              offset: [18, 7],
              formatter: function (params) {
                if (params.dataIndex == 5) {
                  return '下游'
                } else {
                  return ''
                }
              },
              color: '#fff',
              fontSize: '12',
              fontFamily: 'YouSheBiaoTiHei'
            },
            data: [
              [0, yAxisStart],
              [1, yAxisStart + datas.bg / 2],
              [2, yAxisStart + datas.bg],
              [3, datas.bdgc],
              [4, yAxisStart + datas.bg / 2],
              [5, yAxisStart]
            ]
          },
          {
            type: 'line',
            name: '实测水位',
            z: 4,
            symbolSize: 0,
            lineStyle: {
              color: 'white'
            },
            data: [
              [-3, yAxisStart],
              [-2, yAxisStart],
              [-1, yAxisStart],
              [0, yAxisStart],
            ]
          },
          {
            type: 'line',
            name: '坝顶高程',
            z: 6,
            lineStyle: {
              color: 'rgba(0,0,0,0)'
            },
            symbolSize: 0,
            label: {
              show: true,
              position: 'top',
              offset: [-15, 0],
              formatter: function (params) {
                if (params.dataIndex == 4) {
                  return '▼ ' + params.seriesName + '：' + datas.bdgc + 'm'
                } else {
                  return ''
                }
              },
              color: '#CCC',
              fontSize: '12',
              fontFamily: 'YouSheBiaoTiHei'
            },
            itemStyle: {
              color: 'rgba(0,0,0,0)'
            },
            data: [
              [0, 0],
              [1, 0],
              [2, 0],
              [3, 0],
              [4, datas.bdgc],
              [5, datas.bdgc]
            ]
          },
          {
            type: 'line',
            name: '校核水位',
            label: {
              show: true,
              position: 'top',
              offset: [30, 3],
              formatter: function (params) {
                if (params.dataIndex == 1) {
                  return '▼ ' + params.seriesName + '：' + datas.jhsw + 'm'
                } else {
                  return ''
                }
              },
              color: 'red',
              fontSize: '12'
            },
            z: 2,
            symbolSize: 0,
            lineStyle: {
              color: 'red'
            },
            data: [
              [-3, datas.jhsw],
              [-2, datas.jhsw],
              [-1, datas.jhsw],
              [0, datas.jhsw],
              [1, datas.jhsw],
              [2, datas.jhsw],
              [3, datas.jhsw]
            ]
          },
          {
            type: 'line',
            name: '设计水位',
            z: 2,
            symbolSize: 0,
            lineStyle: {
              color: 'yellow'
            },
            label: {
              show: true,
              position: 'top',
              offset: [30, 3],
              formatter: function (params) {
                if (params.dataIndex == 1) {
                  return '▼ ' + params.seriesName + '：' + datas.sjsw + 'm'
                } else {
                  return ''
                }
              },
              overflow: 'truncate',
              color: 'yellow',
              fontSize: '12'
            },
            data: [
              [-3, datas.sjsw],
              [-2, datas.sjsw],
              [-1, datas.sjsw],
              [0, datas.sjsw],
              [1, datas.sjsw],
              [2, datas.sjsw],
              [3, datas.sjsw]
            ]
          },
          {
            type: 'line',
            name: '汛限水位',
            z: 4,
            symbolSize: 0,
            lineStyle: {
              color: '#765493'
            },
            label: {
              show: true,
              position: 'top',
              offset: [30, 3],
              formatter: function (params) {
                if (params.dataIndex == 1) {
                  return '▼ ' + params.seriesName + '：' + datas.scsw + 'm'
                } else {
                  return ''
                }
              },
              overflow: 'truncate',
              color: '#765493',
              fontSize: '12'
            },
            data: [
              [-3, datas.xxsw],
              [-2, datas.xxsw],
              [-1, datas.xxsw],
              [0, datas.xxsw],
              [1, datas.xxsw],
              [2, datas.xxsw],
              [3, datas.xxsw]
            ]
          },
          {
            type: 'line',
            name: '死水位',
            z: 4,
            symbolSize: 0,
            lineStyle: {
              color: 'white'
            },
            label: {
              show: true,
              position: 'top',
              offset: [23, 3],
              formatter: function (params) {
                if (params.dataIndex == 1) {
                  return '▼ ' + params.seriesName + '：' + datas.scsw + 'm'
                } else {
                  return ''
                }
              },
              overflow: 'truncate',
              color: 'white',
              fontSize: '12'
            },
            data: [
              [-3, datas.ssw],
              [-2, datas.ssw],
              [-1, datas.ssw],
              [0, datas.ssw],
              [1, datas.ssw],
              [2, datas.ssw],
              [3, datas.ssw]
            ]
          },
          {
            type: 'line',
            name: '实测水位',
            z: 4,
            symbolSize: 0,
            lineStyle: {
              color: 'white'
            },
            label: {
              show: true,
              position: 'top',
              offset: [30, 3],
              formatter: function (params) {
                if (params.dataIndex == 1) {
                  return '▼ ' + params.seriesName + '：' + datas.scsw + 'm'
                } else {
                  return ''
                }
              },
              overflow: 'truncate',
              color: 'white',
              fontSize: '12'
            },
            data: [
              [-3, datas.scsw],
              [-2, datas.scsw],
              [-1, datas.scsw],
              [0, datas.scsw],
              [1, datas.scsw],
              [2, datas.scsw],
              [3, datas.scsw]
            ]
          },
          {
            type: 'bar',
            name: 'leftBar',
            z: 8,
            barWidth: 10,
            itemStyle: {
              color: '#184067'
            },
            label: {
              show: true,
              position: 'bottom',
              offset: [-25, -15],
              formatter: function () {
                return '上游'
              },
              color: '#fff',
              fontSize: '12',
              fontFamily: 'YouSheBiaoTiHei'
            },
            data: [[-3.1, datas.bdgc]]
          }
        ]
      }
      option && this.damChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .siquanDiv {
    width: 100%;
    height: auto;
    background-color: #0c2a4966;
    backdrop-filter: blur(0px);
    padding: 0 5px;
    box-sizing: border-box;
    margin-bottom: 8px;

    .modelOne {
      width: 100%;
      height: auto;
      display: flex;
      justify-content: space-between;
      margin-bottom: 1vh;
      padding: 0 0.8vw;
      box-sizing: border-box;

      .itemDiv {
        width: 32%;
        display: flex;

        img {
          margin-right: 5px;
        }

        .rightDiv {
          flex: 1;
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 1.7vh;
          color: #00ffff;

          p:nth-child(1) {
            padding: 3px;
            box-sizing: border-box;
            background: linear-gradient(to right, #0565a7, transparent);
          }
        }
      }
    }

    .modelTwo {
      width: 100%;
      height: auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding: 0 0.8vw;
      box-sizing: border-box;

      .itemDiv:hover {
        opacity: 0.8;
      }

      .itemDiv {
        cursor: pointer;
        width: 32%;
        background: url('@/assets/img/common/siquanItemBg.png') top no-repeat;
        background-size: 100% 100%;
        padding: 0.3vh 0;
        margin-bottom: 1vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        p:nth-child(1) {
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 1.5vh;
          color: #00ffff;
        }

        p:nth-child(2) {
          width: 100%;
          white-space: nowrap;
          text-align: center;
          overflow: hidden;
          text-overflow: ellipsis;
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 1.7vh;
          color: #ffffff;
        }
      }
    }
  }

  .sizhiDiv {
    width: 100%;
    height: 30vh;
    background-color: #0c2a4966;
    backdrop-filter: blur(0px);
    padding: 0 5px;
    box-sizing: border-box;
    margin-bottom: 8px;
    display: flex;
    flex-direction: column;

    .sizhiContent {
      flex: 1;
      display: flex;
      flex-direction: column;
      padding: 0.5vh 2vh;
      box-sizing: border-box;

      .itemDiv {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: row;
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 1.7vh;
        color: #c5d1df;

        .leftDiv {
          flex: 1;
          display: flex;

          img {
            margin-right: 0.3vw;
            height: 55px;
          }

          .firstDiv {
            flex: 1;
            color: #e9e5ff;

            p:nth-child(2) {
              font-size: 1.9vh;
              width: 11vh;
              padding: 3px;
              box-sizing: border-box;
              background: linear-gradient(to right, #0565a7, transparent);
            }
          }
        }

        .rightDiv {
          width: auto;

          p:nth-child(2) {
            color: #e9e5ff;
          }
        }
      }
    }
  }

  .jypxDiv {
    width: 100%;
    background-color: #0c2a4966;
    backdrop-filter: blur(0px);
    flex: 1;
    display: flex;
    flex-direction: column;

    .jypxContent {
      flex: 1;
      display: flex;
      justify-content: space-around;

      video {
        display: block;
        height: 100%;
        width: 90%;
        margin: 0 auto;
        -o-object-fit: fill;
        object-fit: fill;
        border: 6px solid #124373;
        box-sizing: border-box;
      }

      .itemDiv:nth-child(2),
      .itemDiv:nth-child(3) {
        p:nth-child(1) {
          background: url('@/assets/img/common/jypxBg2.png') top no-repeat;
          background-size: 100% 100%;
        }
      }

      .itemDiv {
        width: 25%;
        display: flex;
        flex-direction: column;
        font-family: Source Han Sans CN;
        color: #ffffff;

        p:nth-child(1) {
          height: 75%;
          background: url('@/assets/img/common/jypxBg.png') top no-repeat;
          background-size: 100% 100%;
          font-weight: bold;
          font-size: 2.7vh;
          display: flex;
          justify-content: center;
        }

        p:nth-child(2) {
          font-size: 1.7vh;
          display: flex;
          justify-content: center;
        }
      }
    }
  }
}
</style>
